<template>
    <div class="page2-r fr">
        <div class="page2-chart fl">
            <TabTit>全量订单特定阶段实时利率</TabTit>
            <div style="width:800px;height:300px; overflow: hidden;">
                <div id="page2tu" style="width:920px;height:300px"></div>
            </div>
        </div>
        <div class="page2-info fr">
            <TabTit>招投标阶段实时利率</TabTit>
            <div class="li-one" v-for="item in info" :key="item.index">
                <div class="li-name fl">{{item.name}} :</div>
                <div class="li-num fl">{{item.num}}</div>
            </div>
        </div>
    </div>
</template>
<script>
import TwoNav from '../components/TwoPageNav.vue'
import TabTit from '@/components/Tit.vue'
export default {
    components: {
        TwoNav,
        TabTit,
    },
    data() {
        return {
            info: [
                {
                    name: '供应商数量',
                    num: '97',
                },
                {
                    name: '招投标笔数',
                    num: '63',
                },
                {
                    name: '订单总金额（亿元）',
                    num: '85',
                },
                {
                    name: '平均建议利率',
                    num: '5.2%',
                },
            ],
        }
    },
    mounted() {
        this.InitChart()
    },
    methods: {
        InitChart() {
            let myChart = this.$echarts.init(document.getElementById('page2tu'))
            // 指定图表的配置项和数据
            var option = {
                color: ['#7bbfea', '#00796a', '#e1251b'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999',
                        },
                    },
                    formatter: function (params) {
                        var relVal = params[0].name
                        for (var i = 0, l = params.length; i < l; i++) {
                            if (params[i].seriesName === '实时建议利率') {
                                relVal += '<br/>' + params[i].seriesName + '(%)' + ' : ' + params[i].value
                                relVal += '<br/>' + '平均建议利率(%)' + ' : ' + params[i].value
                            }
                        }
                        return relVal
                    },
                },
                toolbox: {
                    // feature: {
                    //     dataView: { show: true, readOnly: false },
                    //     magicType: { show: true, type: ['line', 'bar'] },
                    //     restore: { show: true },
                    //     saveAsImage: { show: true },
                    // },
                },
                legend: {
                    data: ['实时建议利率'],
                },
                xAxis: [
                    {
                        type: 'category',
                        data: [
                            '2021/2/16',
                            '2021/3/16',
                            '2021/4/10',
                            '2021/5/16',
                            '2021/5/30',
                            '2021/6/20',
                            '2021/7/16',
                        ],
                        axisPointer: {
                            type: 'shadow',
                        },
                        boundaryGap: false,
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '',
                        min: 0,
                        max: 10,
                        interval: 2,
                        axisLabel: {
                            formatter: '{value} %',
                        },
                    },
                ],
                grid: {
                    right: 5,
                    left: 5,
                    top: 50,
                    containLabel: true,
                },
                series: [
                    {
                        name: '实时建议利率',
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        data: [4.6, 4.6, 4.5, 4.6, 5.9, 4.8, 4.5, 5.5, 5.2, 5.4],
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: 'rgba(58,132,255, 0)', // 100% 处的颜色
                                    },
                                    {
                                        offset: 0,
                                        color: 'rgba(58,132,255, 0.5)', // 0% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        },
                    },
                ],
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
            myChart.on('click', function (e) {
                console.log('444', e)
            })
        },
    },
}
</script>
<style lang="scss" scoped>
.page2-chart {
    width: 766px;
    padding-top: 10px;
}
.page2-info {
    width: 344px;
    padding-top: 10px;
}
.li-name {
    width: 139px;
    text-align: right;
    font-size: 12px;
    height: 25px;
    margin-right: 10px;
}
.li-num {
    height: 25px;
    font-size: 12px;
}
</style>
